<template>
  <div class="flex flex-col">
    <div v-for="session in data" class="my-2 px-4">
      <div class="text-[12px] font-bold mb-2">{{ session.title }}</div>
      <div class="flex flex-row">
        <div
          v-for="item in session.value"
          :class="`bg-[#F4F5F5] text-sm mr-3 px-2 py-1 rounded-md cursor-pointer ${
            item.selected ? 'active-item' : ''
          }`"
          @click="onClickItem(session, item)"
        >
          {{ item.label }}
        </div>
      </div>
    </div>

    <hr />

    <div class="flex flex-row justify-around pb-4">
      <van-button class="w-[160px]" type="default" @click="resetAction">重置</van-button>
      <van-button class="w-[160px]" type="primary" @click="submitAction">完成</van-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, defineEmits, defineProps, onMounted } from "vue";

const emits = defineEmits(["onConfirm"]);
const props = defineProps({
  filterDateUnit: {
    type: String,
    default: "quarter",
  },
});

const data = ref([]);
onMounted(() => {
  if (data.value.length === 0) {
    initData();
  }
});

function initData() {
  data.value = [
    {
      title: "待办状态",
      value: [
        { label: "未完成", value: false, selected: true },
        { label: "已完成", value: true },
      ],
    },
    {
      title: "排序方式",
      value: [
        { label: "按会议时间", value: "startTime", selected: true },
        { label: "按待办截止时间", value: "deadline" },
      ],
    },
  ];
}

function resetAction() {
  initData();
  // data.value.forEach((session) => {
  //   session.value.forEach((item) => {
  //     item.selected = false;
  //   });
  // });
  // data.value[0].value[1].selected = true;
  // data.value[2].value[0].selected = true;
}

function submitAction() {
  let parameter = {};
  data.value.forEach((session) => {
    const title = session.title;
    session.value.forEach((item) => {
      if (title === "时间范围" && item.selected) {
        parameter.dateUnit = item.value;
      }
      if (title === "待办状态" && item.selected) {
        parameter.done = item.value;
      }
      if (title === "排序方式" && item.selected) {
        parameter.orderBy = item.value;
      }
    });
  });
  console.log("submitAction: ", parameter);
  emits("onConfirm", parameter);
}

function onClickItem(session, item) {
  session.value.forEach((item) => {
    item.selected = false;
  });
  item.selected = true;
}
</script>

<style lang="less" scoped>
hr {
  border-color: #e9e9e9;
  margin: 20px 0;
}

.active-item {
  background-color: #f0f3ff;
  color: #436bff;
}
</style>
